<template>
	<view class="content">
		<!--		<page-meta>-->
		<!--			<navigation-bar background-color="#1E1F31"></navigation-bar>-->
		<!--		</page-meta>-->
		<view :class="show ? 'fade-in' : 'fade-out'">
			<view class="navTab">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index}" @click="tabChange(index)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/4+'px'}"></view>
				</view>
			</view>
			<view class="box">
				<block v-for="(item,index) in goodsList" :key="index">
					<view class="list">
						<view class="name">{{item.title}}</view>
						<image :src="item.image" mode="widthFix"></image>
						<view class="btn" @click="open(item.id,item.title)">
							<text>{{item.money}}海豚币</text>
							<text v-if="item.tian>0">{{item.tian}}{{item.danwei}}</text>
						</view>
					</view>
				</block>
			</view>
			<view class="kong" v-if="goodsList.length == 0">
				<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/kong.png" mode=""></image>
				<text>暂无内容</text>
			</view>
			<tn-load-more :status="loadStatus"></tn-load-more>
			<view class="" style="height: 120rpx;"></view>
			<view class="foot">
				<view class="foot-left">
					<image src="/static/index/priceIcon.png" mode=""></image>
					<text>我的海豚币：{{money}}</text>
				</view>
				<view class="foot-right" @click="goKnapsack">我的背包</view>
			</view>
		</view>
		<modal ref="modal" type="1" :content="content" @confirm="confirmPay"></modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				scrollList: [],
				current: 0,
				width: 0,
				left: 0,
				itemNode: '',
				goodsList: [],
				page: 1,
				show: false,
				loadStatus: 'nomore',
				money: 0,
				content: '',
				id: ''
			}
		},
		onLoad() {
			uni.showLoading();
			this.InitLoadingPage()
		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').boundingClientRect(data => {
					this.itemNode = data
					this.width = data[this.current].width
				}).exec();
			}, 500)
		},
		onReachBottom() {
			this.page++
			this.loadStatus = 'loading'
			this.bottomLoadingApi()
		},
		methods: {
			InitLoadingPage() {
				const promiseArr = [this.shopclass(), this.shopList()]
				Promise.all(promiseArr).then(resArr => {
					this.renderPage(resArr)
				}).catch(err => {
					console.log(err)
				})
			},
			renderPage([res1, res2]) {
				// tab
				this.scrollList = res1.data.data
				this.money = res1.data.msg
				// 列表
				this.goodsList = res2.data.data
				uni.hideLoading();
				this.show = true

			},
			// 获取tab
			shopclass() {
				return this.$request({
					loading: 0,
					method: 'post',
					url: '/api/gift/shopclass',
					data: {
						id: 0,
						xiaolei: 0
					}
				})
			},
			// 列表
			shopList(loading) {
				return this.$request({
					loading,
					method: 'post',
					url: '/api/gift/shopList',
					data: {
						page: this.page,
						tabsIndex: this.current,
						id: 0
					}
				})
			},
			async bottomLoadingApi() {
				let data = await this.shopList()
				this.goodsList = this.goodsList.concat(data.data.data)
				this.loadStatus = 'nomore'
				if (data.data.data.length == 0) {
					this.page--
				}
			},
			async tabChange(index) {
				this.current = index
				this.left = this.itemNode[index].left
				this.page = 1
				let data = await this.shopList(1)
				this.goodsList = data.data.data
			},
			open(id, title) {
				this.$refs['modal'].open()
				this.id = id
				this.content = `确定购买${title}吗?`
			},
			async confirmPay() {
				try {
					let result = await this.$request({
						loading: 1,
						method: 'post',
						url: '/api/gift/goumaipass',
						data: {
							id: this.id
						}
					})
					this.$refs['modal'].close()
					this.msg(result.data.msg)
				} catch (e) {
					this.$refs['modal'].close()
					this.msg(e.data.msg)
				}

			},
			goKnapsack() {
				uni.navigateTo({
					url: "/playcenterPage/my-knapsack"
				})
			}


		}
	}
</script>
<style lang="scss" scoped>
	.content {
		.navTab {
			display: flex;
			align-items: center;
			height: 98rpx;
			position: relative;
			background-color: #ffffff;
			position: sticky;
			z-index: 10;
			/* #ifdef H5 */
			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */

			.tab-item {
				width: 25%;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				// margin-right: 56rpx;
			}

			.at-tab-item {

				font-weight: bold;
				color: $uni-text-color;

			}

			.tab-bottom {
				position: absolute;
				bottom: 0;
				transition: left .2s linear;
				display: flex;
				justify-content: center;

				.xian {
					height: 8rpx;
					background: linear-gradient(90deg, #080808 0%, #080808 100%);
					border-radius: 60rpx;
				}
			}
		}


		.box {
			padding: 32rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.list {
				width: 330rpx;
				background: #ffffff;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 32rpx 0;
				margin-bottom: 32rpx;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				image {
					width: 180rpx;
					margin: 24rpx 0;
				}

				.btn {
					padding: 0 24rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 42rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 56rpx;
				}
			}
		}

		.kong {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 70%;

			image {
				width: 484rpx;
				height: 370rpx;
			}

			text {
				font-size: 32rpx;
				font-weight: 400;
				color: #CCCCCC;
				margin-top: 24rpx;
			}
		}


		.foot {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;

			.foot-left {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
				}
			}

			.foot-right {
				width: 160rpx;
				height: 56rpx;
				background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 42rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}
</style>